<template>
  <div class="info">

    <div class="rightContent">
      {{this.btnStatus}}
      <div v-if="btnStatus === '0'">
      <div class="Cheader">
        <span class="title">&nbsp;安全设置</span>
      </div>
      <div class="content">
        <div class="headerInfoTitle">
          <div class="userImg">
            <img :src="userImg"/>
          </div>
          <div class="userMes">
            <div class="message">登录账号：1212312<span style="color: #FABA8F;">(你已通过实名认证)</span></div>
            <div class="message">账号ID：1212312</div>
            <div class="message">注册时间：2018-07-19 16:18:28</div>
            <div class="message"><span class="userT">修改头像</span></div>
          </div>
        </div>
        <div class="loginLine"></div>
        <div class="loginPwd">
          <span class="pwd">登录密码</span>
          <span style="padding-left: 60px">安全性高的密码可以使帐号更安全。建议您定期更换密码，设置一个包含字母，符号或数字中至少两项且长度超过6位的密码</span>
          <span class="rightIcon">
            <span class="rightIcon1"><img :src="ysz"/>已设置</span>
            <span>&nbsp; | &nbsp;</span>
            <span class="rightIcon2" @click="updatePassword"> 修改</span>
          </span>
        </div>
        <div class="loginPwd">
          <span class="pwd">手机绑定</span>
          <span style="padding-left: 60px">您已绑定了手机185****9559 [您的手机号可以直接用于登录、找回密码等</span>
          <span class="rightIcon">
            <span class="rightIcon1"><img :src="wsz"/>未设置</span>
            <span class="rightIcon1"><img :src="ysz"/>已设置</span>
            <span>&nbsp; | &nbsp;</span>
            <span class="rightIcon2"  @click="bindPhone"> 设置</span>
            <span class="rightIcon2"  @click="updatePhone"> 修改</span>
          </span>
        </div>
        <div class="loginPwd">
          <span class="pwd">邮箱绑定</span>
          <span style="padding-left: 60px">您当前未绑定邮箱 [您的邮箱可以直接用于登录、找回密码等</span>
          <span class="rightIcon">
            <span class="rightIcon1"><img :src="wsz"/>未设置</span>
            <span class="rightIcon1"><img :src="ysz"/>已设置</span>
            <span>&nbsp; | &nbsp;</span>
            <span class="rightIcon2" @click="bindEmail"> 设置</span>
            <span class="rightIcon2" @click="updateEmail"> 修改</span>
          </span>
        </div>
        <div class="thrid">
          第三方登录方式
        </div>
        <div class="loginPwd">
          <span class="pwd">微信</span>
          <span class="rightIcon">
            <span class="rightIcon1"><img :src="wsz"/>未设置</span>
            <span>&nbsp; | &nbsp;</span>
            <span class="rightIcon2"> 修改</span>
          </span>
        </div>
        <div class="loginPwd">
          <span class="pwd">人脸识别</span>
          <span class="rightIcon">
            <span class="rightIcon1"><img :src="wsz"/>未设置</span>
            <span>&nbsp; | &nbsp;</span>
            <span class="rightIcon2"> 修改</span>
          </span>
        </div>
        <div class="loginPwd">
          <span class="pwd">指纹识别</span>
          <span class="rightIcon">
            <span class="rightIcon1"><img :src="wsz"/>未设置</span>
            <span>&nbsp; | &nbsp;</span>
            <span class="rightIcon2"> 修改</span>
          </span>
        </div>
      </div>
      </div>
      <update-pwd v-if="btnStatus === '1'"   v-on:btnStatus = "tabStaus" ></update-pwd>
      <bind-phone v-if="btnStatus === '2'"  v-on:btnStatus = "tabStaus"></bind-phone>
      <update-phone v-if="btnStatus === '3'"  v-on:btnStatus = "tabStaus"></update-phone>
      <bind-email v-if="btnStatus === '4'"  v-on:btnStatus = "tabStaus"></bind-email>
      <update-email v-if="btnStatus === '5'"  v-on:btnStatus = "tabStaus"></update-email>
      <!--<bind-email-success></bind-email-success>-->
    </div>
  </div>
</template>

<script>
  import wsz from '@/assets/userMessage/wsz.png'
  import ysz from '@/assets/userMessage/yszicon.png'
  import userImg from '@/assets/userMessage/userImg.png'
  import updatePwd from './updatePwd'
  import bindPhone from './bindPhone'
  import updatePhone from './updatePhone'
  import bindEmail from './bindEmail'
  import updateEmail from './updateEmail'

  export default {
    components: {
      updatePwd,
      bindPhone,
      updatePhone,
      bindEmail,
      updateEmail
    },
    data() {
      return {
        wsz,
        ysz,
        userImg,
        btnStatus: '0' // 状态为1的时候是修改密码
      }
    },
    computed: {
      btnStatus() {
        return this.$store.getters.btnStatus
      }
    },
    methods: {
      // 修改密码
      updatePassword() {
        this.btnStatus = '1'
      },
      bindPhone() {
        this.btnStatus = '2'
      },
      // 修改手机号
      updatePhone() {
        this.btnStatus = '3'
      },
      // 绑定邮箱
      bindEmail() {
        this.btnStatus = '4'
      },
      // 修改邮箱
      updateEmail() {
        this.btnStatus = '5'
      },
      // 返回监听
      tabStaus(activStatus) {
        this.btnStatus = activStatus
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .info{
    .configTop{
      width: 100%;
      height: 40px;
      .configTitle{
        font-size: 16px;
        color: #676A70;
        padding-left: 5px;
        border-left: 5px solid #25B6C7;
        height: 16px;
      }
    }
    .rightContent{
      width: 90%;
      height: 900px;
      margin-left: 200px;
      /*float: right;*/
      .Cheader {
        width: 100%;
        height: 60px;
        line-height: 60px;
        border-bottom: 1px solid #E7E7E7;
        .title {
          border-left: 5px solid #25B6C7;
        }
      }
      .content{
        width:100%;
        height: 600px;
        .headerInfoTitle{
          width: 500px;
          height: 120px;
          font-size:16px;
          font-family:MicrosoftYaHei;
          font-weight:400;
          color:rgba(50,56,66,1);
          margin-top: 10px;
          .userImg{
            width: 120px;
            height: 110px;
            background-color: #EFEFEF;
            border-radius: 4px;
            text-align: center;
            float: left;
          }
          .userMes{
            width: 350px;
            height: 120px;
            float: right;
            font-family:MicrosoftYaHeiLight;
            font-weight:300;
            color:rgba(105,114,126,1);
            line-height:30px;
            .message{
              .userT{
                font-size:12px;
                font-family:MicrosoftYaHeiLight;
                font-weight:300;
                color:rgba(37,183,200,1);
                cursor: pointer;
              }
            }
          }

        }
        .loginLine{
          width: 100%;
          height: 40px;
          border-bottom: 1px dashed #E7E7E7;
        }
        .loginPwd{
          width: 100%;
          height: 75px;
          line-height: 75px;
          border-bottom: 1px dashed #E7E7E7;
          font-size:12px;
          font-family:MicrosoftYaHeiLight;
          font-weight:300;
          color:rgba(105,114,126,1);
          padding-left: 60px;
          .pwd{
            font-size:14px;
            font-family:MicrosoftYaHei;
            font-weight:400;
            color:rgba(50,56,66,1);
          }
          .rightIcon{
            right: 40px;
            position: absolute;
            .rightIcon1{
              font-size:12px;
              font-family:MicrosoftYaHeiLight;
              font-weight:300;
              color:rgba(117,188,81,1);
              img{
                vertical-align: middle;
              }
            }
            .rightIcon2{
              font-size:12px;
              font-family:MicrosoftYaHeiLight;
              font-weight:300;
              color:#25B7C8;
              cursor: pointer;
            }
          }
        }
        .thrid{
          width: 100%;
          height: 60px;
          line-height: 70px;
          border-bottom: 1px solid #E7E7E7;
          font-size:14px;
          font-family:MicrosoftYaHei-Bold;
          font-weight:bold;
          color:rgba(50,56,66,1);
          padding-left: 60px;
        }
      }
    }
  }

</style>
